<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
*{
    margin: 0;
    padding: 0;
}
body{
    background: #f0f0f0;

}

.box{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

ul{
    display: flex;
    list-style: none;
}
li{
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    color: #333;
    background: hsl(0, 0%, 94%);
    border: 2px solid #DEDEDE;
    border-radius: 50%;
    margin-right: 50px;
    position: relative;
    transition: border 1s ease;
}
li::after{
    content: '';
    position: absolute;
    top: 50%;
    left: -52px;
    transform: translateY(-50%);
    width: 50px;
    height: 2px;
    background: #DEDEDE;
    transition: background 1s ease;









}
li:nth-child(1)::after{
    display: none;

}

li:nth-child(1){
    border: 2px solid #6293Cf;
}

li.active{
    border: 2px solid #6293Cf;
    

}


li::before{
    width: 0;
    background: #6293Cf;
    transition: width 1s ease;
    z-index: 2;
}
li.active::before{
     width:50px;
}

.btn{
    display: flex;
    margin-top: 20px;

}

.btn>div{
    padding: 5px 20px;
    background: #6293Cf;
    border-radius: 4px;
    margin-right: 20px;
    cursor: pointer;
    color: #fff;
}

</style>




<body>



    <div class="box">
        <ul>
            <li >1</li>
            <li>2</li>
            <li >3</li>
            <li>4</li>
        </ul>

       <div class="btn">
           <div class="prev">上一步</div>
      <div class="next">下一步</div>
       </div> 
      
    </div>
   

  




</body>


<script>
    const prev = document.querySelector( ".prev")
    const next = document.querySelector( ".next")


    const lis = document.querySelectorAll("li")
    let index = 1

    next.addEventListener("click",()=>{
        if(index === lis.length){
            alert('完成')
            return
        }





        lis[index].classList.add('active')
        index++

        
    })

    prev.addEventListener("click",()=>{
        if(index === 1){
            alert('完成')
            return
        }




        index--
        lis[index].classList.remove('active')
        

        
    })



</script>
</html>